import "../../css/mainPage.scss";
import { Carousel, Button } from "antd";
import { useState } from "react";
import testIcon from "../../assets/testIconpng.png";
import testIcon2 from "../../assets/testIconpng2.png";
import { useRef } from "react";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
const lastestType = [
  {
    id: 1,
    value: "软件",
  },
  {
    id: 2,
    value: "游戏",
  },
  {
    id: 3,
    value: "插件",
  },
  {
    id: 4,
    value: "图标",
  },
];
const lastestBox = new Array(8).fill(1);
const navLeftList = new Array(8).fill(1);
export default function MainPage() {
  const navigation = useNavigate();
  const randomColor = useRef(0);
  const [activeNavItem, setActiveNavItem] = useState(0);
  const navTimer = useRef(null);
  const listItemDomRef = useRef([]);
  const listWrapDom = useRef(null);
  const carouselRef = useRef(null);

  const randomGradient = [
    "linear-gradient(135deg,#43CBFF 15%,#9708CC 100%);",
    "linear-gradient(120deg,#E0C3FC 0%,#8EC5FC 100%); ",
    "linear-gradient(90deg,#F83600 0%,#F9D423 100%); ",
    "linear-gradient(135deg,#81FBB8 15%,#28C76F 100%); ",
  ];

  const onChange = (currentSlide) => {};
  const handleMouseMove = (e, index) => {
    const halfHeight = 125;
    const halfWidth = 125;
    const MAX_DEG = 20;
    const { offsetX, offsetY } = e.nativeEvent;
    let rotateX = 0;
    let rotateY = 0;

    rotateX = -((halfHeight - offsetY) / halfHeight) * MAX_DEG;
    rotateY = ((halfWidth - offsetX) / halfWidth) * MAX_DEG;
    e.target.parentNode.setAttribute(
      "style",
      `transform: perspective(400px) rotateX(${rotateX}deg) rotateY(${rotateY}deg);background: ${
        randomGradient[randomColor.current]
      };color:white`
    );
  };
  const handleMouseOut = (e) => {
    randomColor.current = Math.floor(
      Math.random() * (randomGradient.length - 1)
    );
    e.target.parentNode.style = {};
  };

  const autoPlayList = (index) => {
    let maxLength = navLeftList.length;
    let maxListItemDomLength = listItemDomRef.current.length;
    // 最大偏移量Y
    let maxTranslateY =
      listItemDomRef.current[maxListItemDomLength - 5].offsetTop -
      listItemDomRef.current[0].offsetTop;
    let translateY = 0;
    let step = index || 0;
    clearInterval(navTimer.current);
    navTimer.current = setInterval(() => {
      step += 1;
      if (step >= maxLength) step = 0;
      setActiveNavItem(step);
      
      if (step >= 2) {
        translateY = (step - 2) * -80;
        if (translateY <= -maxTranslateY) {
          translateY = -maxTranslateY;
        }
      }
      if (step == 0) {
        translateY = 0;
      }
      listWrapDom.current.setAttribute(
        "style",
        `transform:translateY(${translateY}px)`
      );
      carouselRef.current.goTo(step);
    }, 3000);
  };
  const listMouseMove = () => {
    clearInterval(navTimer.current);
  };
  const listMouseOut = () => {
    autoPlayList(activeNavItem);
  };

  useEffect(() => {
    autoPlayList();
    return () => {
      clearInterval(navTimer.current);
    };
  }, []);
  return (
    <div className="mainPage">
      <div className="header">
        <Carousel afterChange={onChange} ref={carouselRef} arrows>
          {navLeftList.map((item, index) => {
            return (
              <div className="carousel-box" key={index}>
                <img src={testIcon2} alt="" />
                <p className="title">
                  {index} Microsoft Office LTSC 2024 for Mac(office全家桶)
                </p>
                <p className="version">v16.92中文激活版 </p>
                <p className="info">
                  <span>38.9 MB</span>
                  <span> | </span>
                  <span>2024-12-23</span>
                </p>
                <Button type="primary" shape="round" size="large">
                  立即下载
                </Button>
              </div>
            );
          })}
        </Carousel>
        <div
          className="list"
          onMouseMove={() => {
            listMouseMove();
          }}
          onMouseOut={() => {
            listMouseOut();
          }}
        >
          <div className="listWrap" ref={listWrapDom}>
            {navLeftList.map((item, index) => {
              return (
                <div
                  className={`listItem ${
                    activeNavItem === index ? "active" : ""
                  }`}
                  key={index}
                  ref={(ele) => {
                    listItemDomRef.current[index] = ele;
                  }}
                >
                  <img src={testIcon2} alt="" />
                  <div className="desc">
                    {index} - Microsoft Office LTSC 2024 for Mac(office全家桶)
                    v16.92中文激活版
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <div className="container">
        <div className="latest-update">
          <div className="title">最新更新</div>
          <div className="nav">
            {lastestType.map((item, index) => {
              return (
                <div className="latest-update-nav" key={index}>
                  {item.value}
                </div>
              );
            })}
          </div>
          <div className="content">
            {lastestBox.map((item, index) => {
              return (
                <div
                  className={"latest-update-box"}
                  key={index}
                  onMouseMove={(e) => {
                    handleMouseMove(e, index);
                  }}
                  onMouseOut={(e) => {
                    handleMouseOut(e);
                  }}
                  onClick={() => {
                    navigation("/appDetailPage");
                  }}
                >
                  <img src={testIcon} alt="" />
                  <div className="detail">
                    <p className="boxTitle">
                      OmniFocus Pro 4 for mac(最佳GTD时间效率工具)
                    </p>
                    <p className="version">v4.5.1正式激活版</p>
                    <p className="info">
                      <span>38.9 MB</span>
                      <span> | </span>
                      <span>2024-12-23</span>
                    </p>
                  </div>
                  <div className="mask"></div>
                </div>
              );
            })}
          </div>
          <div className="more">更多</div>
        </div>
        <div className="latest-update">
          <div className="title">最新更新</div>
          <div className="nav">
            {lastestType.map((item, index) => {
              return (
                <div className="latest-update-nav" key={index}>
                  {item.value}
                </div>
              );
            })}
          </div>
          <div className="content">
            {lastestBox.map((item, index) => {
              return (
                <div
                  className={"latest-update-box"}
                  key={index}
                  onMouseMove={(e) => {
                    handleMouseMove(e, index);
                  }}
                  onMouseOut={(e) => {
                    handleMouseOut(e);
                  }}
                >
                  <img src={testIcon} alt="" />
                  <div className="detail">
                    <p className="boxTitle">
                      OmniFocus Pro 4 for mac(最佳GTD时间效率工具)
                    </p>
                    <p className="version">v4.5.1正式激活版</p>
                    <p className="info">
                      <span>38.9 MB</span>
                      <span> | </span>
                      <span>2024-12-23</span>
                    </p>
                  </div>
                  <div className="mask"></div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}
